<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!-- 防抖 -->
    <input type="text" oninput="debounce()">
    
    <!-- 节流 -->
    <input type="button" onclick="throttle()" value="按钮">
  </body>
  
  <script>
    let timeoutDebounce = null;
    function debounce() {
      if (timeoutDebounce != null) {
        console.log('清空计时');
        clearTimeout(timeoutDebounce);
      }
      
      console.log('开始计时');
      timeoutDebounce = setTimeout(() => {
        console.log('完成任务');
      }, 10000);
    }
    
    let timeoutThrottle = null;
    function throttle() {
      if (timeoutThrottle != null) {
        console.log('阻止事件');
        return;
      }
      
      console.log('开始计时');
      timeoutThrottle = setTimeout(() => {
        console.log('完成任务');
        timeoutThrottle = null;
      }, 10000);
    }
  </script>
</html>